<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>管理首页</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/AdminLTE.min.css">

    <link rel="stylesheet" href="css/all-skins.min.css">
    <link rel="stylesheet" href="css/main.css">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
      <section id="app_index" v-cloak class="content bg-info">
          <div class="row">
              <div class="col-md-3 col-sm-6 col-xs-12">
                  <div class="info-box">
                      <a class="info-box-icon bg-green" href="modules/sys/member.html"><i class="fa fa-user-plus"></i></a>
                      <div class="info-box-content">
                          <span class="info-box-text">今日加入</span>
                          <span class="info-box-number">{{metrics.memberNUms}}</span>
                      </div>
                  </div>
              </div>
              <div class="col-md-3 col-sm-6 col-xs-12">
                  <div class="info-box">
                      <a class="info-box-icon bg-green" href="modules/sys/perlesson.html"><i class="fa fa-user-o"></i></a>
                      <div class="info-box-content">
                          <span class="info-box-text">今日私教课</span>
                          <span class="info-box-number">{{metrics.personalLessonNums}}</span>
                      </div>
                  </div>
              </div>
              <div class="clearfix visible-sm-block"></div>
              <div class="col-md-3 col-sm-6 col-xs-12">
                  <div class="info-box">
                      <a class="info-box-icon bg-green" href="modules/sys/perlesson.html?a=1"><i class="fa fa-users"></i></a>
                      <div class="info-box-content">
                          <span class="info-box-text">今日团课</span>
                          <span class="info-box-number">{{metrics.groupLessonNums}}</span>
                      </div>
                  </div>
              </div>
              <div class="col-md-3 col-sm-6 col-xs-12">
                  <div class="info-box">
                      <a class="info-box-icon bg-green" href="modules/sys/rechargelist.html"><i class="fa fa-jpy"></i></a>

                      <div class="info-box-content">
                          <span class="info-box-text">今日充值</span>
                          <span class="info-box-number">{{metrics.rechargeAmt}}</span>
                      </div>
                  </div>
              </div>
              <div class="col-md-3 col-sm-6 col-xs-12">
                  <div class="info-box">
                      <span class="info-box-icon bg-green"><i class="fa fa-shopping-cart"></i></span>

                      <div class="info-box-content">
                          <span class="info-box-text">今日订单</span>
                          <span class="info-box-number">{{metrics.orderNums}}</span>
                      </div>
                  </div>
              </div>

          </div>
      </section>
      <script src="libs/jquery.min.js"></script>
      <script src="libs/vue.min.js"></script>
      <script src="libs/bootstrap.min.js"></script>
      <script src="plugins/jqgrid/jquery.jqGrid.min.js"></script>
      <script src="libs/app.js"></script>
      <script src="libs/router.js"></script>
      <script src="js/common.js"></script>
      <script type="text/javascript">
          var vm = new Vue({
              el:'#app_index',
              data:{
                    metrics:{
                      memberNUms:0,
                      personalLessonNums:0,
                      groupLessonNums:0,
                      orderNums:0,
                      rechargeAmt:0
                  }
              },
              created: function(){
                  this.getMetrics();
              },
              methods: {
                  getMetrics: function(){
                      $.getJSON(apiBaseURL + "sys/index/metrics", function(r){
                          vm.metrics = r.metrics;
                      });
                  },
                  redirct:function () {
                      
                  }
              }
          });
      </script>
</body>
</html>